<template>
  <div class="sos">
    <div class="sosForm">
        <el-form  :model="form"  label-width="100px" 
         label-position="right"  >
          <el-form-item label="电话号码："  >
            <el-input v-model="form.phone" clearable></el-input>
          </el-form-item>
          <el-form-item label="经度：" >
            <el-input v-model="form.longitude" clearable></el-input>
          </el-form-item>
          <el-form-item label="纬度：" >
            <el-input v-model="form.latitude" clearable></el-input>
          </el-form-item>
          <el-form-item label="地理位置：">
            <el-input type="textarea" v-model="form.address" :rows="2"></el-input>
          </el-form-item>
           <el-form-item label="描述：" >
            <el-input type="textarea" v-model="form.desc" :rows="4"></el-input>
          </el-form-item>
           <el-form-item label="人数：">
            <el-slider
              v-model="form.peopleNum" show-input>
            </el-slider>
          </el-form-item>
          <el-form-item label="类别：">
           <el-radio-group v-model="form.type">
              <el-radio-button label="洪水"></el-radio-button>
              <el-radio-button label="火灾"></el-radio-button>
              <el-radio-button label="户外"></el-radio-button>
              <el-radio-button label="地震"></el-radio-button>
              <el-radio-button label="其他"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary"  @click="submitRequest()">立即创建</el-button>
            <el-button type="warning" @click="clearForm()">清空表单</el-button>
          </el-form-item>
        </el-form>
    </div>
    <div class="sosMap">
        <div class="searchBar">
            <el-input v-model="form.address"  id="tipinput" placeholder="请输入搜索地点" clearable></el-input>
            <!-- <input type="text" id="tipinput"> -->
            <el-button type="primary" @click="searchByHand" plain>搜 索</el-button>
        </div>
        <div class="map" id="container">
        </div>
    </div>
  </div>
</template>
<script>
import "../css/SosForm.css";
import TaskCard from "@/components/TaskCard.vue";
import { NODE_ENV } from "../../config/prod.env";
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";


export default {
  data() {
    return {
      map: null,
      autoComplete: null,
      placeSearchComponent: undefined,
      autoOptions:"tipInput",   //好像this找不到,
      placeSearch:null,
      form: {
          phone:"",
          latitude:"",
          longitude:"",
          address:"",
          desc:"",
          peopleNum:1,
          type:"洪水",
          typeSwitch:{    //中英文转换字典
            '洪水':'flood',
            '地震':"earthquake",
            '户外':"outdoor",
            '火灾':"fire",
            '其他':"other",
          }
        }
    };
  },
  computed: {},
  activated:function(){
      // console.log(this.mapFlag,this.firstFlag);
      if(this.map==null){
         AMapLoader.load({
          key: "3be1ca4ff35ba5046d0c188a12e4fae7", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ["AMap.Scale", "AMap.ToolBar","AMap.AutoComplete",'AMap.PlaceSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          AMapUI: {
            // 是否加载 AMapUI，缺省不加载
            version: "1.1", // AMapUI 版本
            plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件
          },
        })
          .then((AMap) => {
            this.map = new AMap.Map("container", {
              //设置地图容器id
              viewMode: "3D", //是否为3D地图模式，矢量地图
              zoom: 14, //初始化地图级别
              resizeEnable: true,
              center: [114.302725, 30.556636], //初始化地图中心点位置,经纬度
            });

            this.map.addControl(new AMap.Scale());
            this.map.addControl(new AMap.ToolBar());
            this.map.on('click', this.clickMap);
            this.auto = new AMap.Autocomplete({
                input: "tipinput",
                city:"武汉",
                citylimit:true,
                closeResultOnScroll:false
            });
            // var myMap=this.map
            this.placeSearch = new AMap.PlaceSearch({
                map: this.map
            });  //构造地点查询类
            this.auto.on("select", select);//注册监听，当选中某条记录时会触发
            var _this=this
            function select(e) {
                _this.form.address=e.poi.name
                // _this.placeSearch.setCity(e.poi.adcode);
                _this.placeSearch.search(e.poi.name);  //关键字查询查询
            }
            this.mapFlag=true
          })
          .catch((e) => {
            console.log(e);
          });
          }
  },
  mounted: function () {
    // this.firstFlag=true
    //绘地图
    AMapLoader.load({
      key: "3be1ca4ff35ba5046d0c188a12e4fae7", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale", "AMap.ToolBar","AMap.AutoComplete",'AMap.PlaceSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        // 是否加载 AMapUI，缺省不加载
        version: "1.1", // AMapUI 版本
        plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件
      },
    })
      .then((AMap) => {
        this.map = new AMap.Map("container", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式，矢量地图
          zoom: 14, //初始化地图级别
          resizeEnable: true,
          center: [114.302725, 30.556636], //初始化地图中心点位置,经纬度
        });
        
        this.map.addControl(new AMap.Scale());
        this.map.addControl(new AMap.ToolBar());
        this.map.on('click', this.clickMap);
        this.auto = new AMap.Autocomplete({
            input: "tipinput",
            city:"武汉",
            citylimit:true,
            closeResultOnScroll:false
        });
        // var myMap=this.map
        this.placeSearch = new AMap.PlaceSearch({
            map: this.map
        });  //构造地点查询类
        this.auto.on("select", select);//注册监听，当选中某条记录时会触发
        var _this=this
        function select(e) {
            _this.form.address=e.poi.name
            // _this.placeSearch.setCity(e.poi.adcode);
            _this.placeSearch.search(e.poi.name);  //关键字查询查询
        }
        // this.mapFlag=true
      })
      .catch((e) => {
        console.log(e);
      });
    
  },
  components: { TaskCard: TaskCard },
  methods: {
    searchByHand(){
        // this.placeSearch.setCity(e.poi.adcode);
        this.placeSearch.search(this.form.address);
    },
    submitRequest(){
        console.log(this.form);
        console.log(this.form.typeSwitch[this.form.type])
        if(this.form.phone==""||this.form.latitude==""||this.form.longitude==""||this.form.desc==""){
          this.$alert("请检查表单是否填写完整","提交失败");
          return
        }
        axios.get('/helpRequest?requestPhone='+this.form.phone+'&requestDescription='+this.form.desc+
        '&requestNumber='+this.form.peopleNum+'&latitude='+this.form.latitude+'&longitude='+
        this.form.longitude+'&type='+this.form.typeSwitch[this.form.type],).then(res=>{
          this.$message({
                message: '创建请求成功',
                type: 'success'
                });
          this.clearForm()
        }).catch(err=>{
          this.$message({
                message: err,
                type: 'warning'
                });
        })
    },
    clearForm(){
        this.form.phone="",
        this.form.latitude="",
        this.form.longitude="",
        this.form.desc="",
        this.form.address="",
        this.form.peopleNum=0,
        this.form.type="洪水"
    },
    clickMap(e){
        this.form.latitude=e.lnglat.getLat()
        this.form.longitude=e.lnglat.getLng()
    }

  }

};
</script>



